<nz-card [nzBordered]="false">
  <form nz-form (ngSubmit)="refresh()" [nzLayout]="'inline'">
    <div nz-row [nzGutter]="24" >
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex>
          <nz-form-label>姓名</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入姓名" [(ngModel)]="listQuery.keywords" name="keywords" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex>
          <nz-form-label>手机</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入手机" [(ngModel)]="listQuery.phone" name="phone" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex>
          <nz-form-label>有效性</nz-form-label>
          <nz-form-control>
            <nz-radio-group [(ngModel)]="listQuery.enabled" name="enabled"  [nzButtonStyle]="'solid'">
              <label nz-radio-button nzValue="">全部</label>
              <label nz-radio-button nzValue=true>有效</label>
              <label nz-radio-button nzValue=false>无效</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24" [class.text-right]="'true'">
      <div nz-col [nzSpan]="24" class="mb-md" [class.text-right]="'true'">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
        <button nz-button type="reset" (click)="refresh()" [nzSize]="'large'" class="mx-sm">重置</button>
        <button nz-button type="button" (click)="create()" [nzType]="'primary'" [nzSize]="'large'">
          <i class="anticon anticon-plus"></i>
          <span>新建</span>
        </button>
      </div>
    </div>
  </form>
  <nz-table #ajaxTable
            nzShowSizeChanger
            [nzFrontPagination]="false"
            [nzData]="dataSet"
            [nzLoading]="loading"
            [nzTotal]="totalCount"
            [(nzPageIndex)]="pageIndex"
            [(nzPageSize)]="pageSize"
            (nzPageIndexChange)="refresh()"
            (nzPageSizeChange)="refresh()">
    <thead (nzSortChange)="sort($event)" nzSingleSort>
      <tr>
        <th nzShowSort nzSortKey="name">姓名</th>
        <th nzShowSort nzSortKey="phone">手机</th>
        <th nzShowSort nzSortKey="mail"><span>邮箱</span></th>
        <th nzWidth="150px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of ajaxTable.data">
        <td>{{data.name}} </td>
        <td>{{data.phone}}</td>
        <td>{{data.mail}}</td>
        <td>
          <a href="javascript:void(0);"  (click)="edit(data)">编辑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a href="javascript:void(0);"  (click)="delete(data)">删除</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>
<create-user-modal #createUserModal (modalSave)="refresh()"></create-user-modal>
<edit-user-modal #editUserModal (modalSave)="refresh()"></edit-user-modal>
